<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { usePlayerStore } from '@/stores/player'
import { getHotMusic, getMusicById } from '@/api/music'
import type { Music } from '@/stores/player'

const router = useRouter()
const playerStore = usePlayerStore()
const hotMusics = ref<Music[]>([])

onMounted(async () => {
  try {
    hotMusics.value = await getHotMusic()
    console.log('热门音乐列表:', hotMusics.value)
  } catch (error) {
    console.error('获取热门音乐失败:', error)
    hotMusics.value = []
  }
})

const playMusic = async (music: Music) => {
  try {
    await playerStore.playMusic(music)
    playerStore.isPlaying = true
    router.push({
      name: 'Detail',
      params: { id: music.id }
    })
  } catch (error) {
    console.error('播放音乐失败:', error)
  }
}
</script>

<template>
  <div class="hot-music-list">
    <div class="music-grid">
      <div v-for="music in hotMusics" 
           :key="music.id" 
           class="music-card"
           @click="playMusic(music)">
        <div class="cover-wrapper">
          <img :src="music.cover" :alt="music.title">
          <div class="play-hover">
            <i class="play-icon">▶</i>
          </div>
        </div>
        <div class="music-info">
          <h3 class="music-name ellipsis">{{ music.title }}</h3>
          <p class="artist-name ellipsis">{{ music.artist }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.hot-music-list {
  .music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
    
    .music-card {
      background: color-mix(in srgb, var(--bgc-color-2) 60%, transparent);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10px);
      border: 1px solid color-mix(in srgb, var(--primary-color) 5%, transparent);
      
      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px color-mix(in srgb, var(--bgc-color-1) 20%, transparent);
        
        .play-hover {
          opacity: 1;
          transform: scale(1);
        }
      }
      
      .cover-wrapper {
        position: relative;
        padding-top: 100%;
        
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }
        
        .play-hover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
            color-mix(in srgb, var(--bgc-color-1) 30%, transparent),
            color-mix(in srgb, var(--bgc-color-1) 60%, transparent)
          );
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transform: scale(0.95);
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          .play-icon {
            color: var(--primary-color);
            font-size: 45px;
            filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--bgc-color-1) 30%, transparent));
            transform: translateY(2px);
          }
        }
      }
      
      .music-info {
        padding: 16px;
        
        .music-name {
          color: var(--primary-color);
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 6px;
          line-height: 1.4;
        }
        
        .artist-name {
          color: color-mix(in srgb, var(--secondary-color) 85%, transparent);
          font-size: 13px;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>
